<template>
  <BasicDrawer 
    v-bind="$attrs" @register="registerBaseDrawer" title="导入表" 
    :width="800" destroyOnClose showFooter
  >
    <BasicTable @register="registerTable" :rowSelection="rowSelection" />
    <template #footer>
      <a-button @click="handleSubmit(true)" type="primary" :loading="loading" style="margin-right: 0.9rem">确定</a-button>
      <PopConfirmButton title="确定放弃选择？" @confirm="closeDrawer" okText="确定" cancelText="取消">取消</PopConfirmButton>
    </template>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { ref, onMounted, unref } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
import { listAllDataSource, listDbTable } from './api';
import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
import { tableColumns, searchTableFormSchema } from './data';
import { PopConfirmButton } from '/@/components/Button';
import { useMessage } from '/@/hooks/web/useMessage'

const loading = ref(false);
const checkedKeys = ref<any>([]);
const emit = defineEmits(['register', 'select']);

const [registerTable, { reload, getForm, setProps }] = useTable({
  title: '',
  api: listDbTable,
  immediate: false,
  columns: tableColumns,
  rowSelection: {
    selectedRowKeys: checkedKeys,
    type: 'radio',
    onChange: (selectedRowKeys: (string | number)[]) => checkedKeys.value = selectedRowKeys,
    columnWidth: 60
  },
  formConfig: {
    showResetButton: false,
    labelWidth: 60,
    schemas: searchTableFormSchema,
    autoSubmitOnEnter: true,
    wrapperCol: { lg: 24, md: 24 },
    baseColProps: { lg: 8, md: 8 },
  },

  striped: true,
  useSearchForm: true,
  showTableSetting: true,
  clickToRowSelect: false,
  bordered: true,
  showIndexColumn: false,
  // tableSetting: {fullScreen: true},
  canResize: false,
  rowKey: 'tableName'
});



const [registerBaseDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  setProps({});
  checkedKeys.value = []
  const { updateSchema } = getForm()
  await updateSchema({
    field: 'datasourceId',
    componentProps: ({ formModel, formActionType }) => {
      const { setFieldsValue } = formActionType
      return {
        optionFilterProp: "label",
        showSearch: true,
        api: listAllDataSource,
        onOptionsChange: (options) => {
          if (options && options.length > 0) {
            setFieldsValue({ datasourceId: options[0].value })
            reload()
          }
        },
        onSelect: (value: any, option: any) => {
          console.log("option", option);
          setFieldsValue({ datasourceId: option.value })
          reload()
        },
      }
    }
  });
});

/**
 * 选择列配置
 */
const rowSelection = {
  type: 'checkbox',
  columnWidth: 50,
  selectedRowKeys: checkedKeys,
  onChange: onSelectChange
}

/**
 * 选择事件
 */
function onSelectChange(selectedRowKeys: (string | number)[], selectionRows) {
  checkedKeys.value = selectedRowKeys;
}

/**
 * 提交
 */
async function handleSubmit(exit) {
  // 参数是tables
  loading.value = true;
  try {
    const fromParams = await getForm().validate()
  
    emit("select", { tableNames: unref(checkedKeys), ...fromParams })
    exit && closeDrawer()
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false;
  }
}

</script>